<template>
  <div class="search-container">
    <el-input
      v-model="localQuery"
      placeholder="搜索用户"
      class="search-input"
      @keyup.enter="emitSearch"
    >
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>
    <el-button type="primary" @click="emitSearch">搜索</el-button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';

const props = defineProps({
  modelValue: String
});

const emit = defineEmits(['update:modelValue', 'search']);

const localQuery = ref(props.modelValue);

watch(localQuery, (newValue) => {
  emit('update:modelValue', newValue);
});

const emitSearch = () => {
  emit('search');
};
</script>

<style scoped>
.search-container {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}
</style>
